<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/8/31
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"  %>
<html>
<head>
  <title>购买页</title>
  <link rel="stylesheet" href="css/zybootstrap.css">
  <link rel="stylesheet" href="css/zybuy.css">
</head>
<script charset="UTF-8" src="js/jquery-3.3.1.js"></script>
<script charset="UTF-8"  src="js/bootstrap.js"></script>
<body>
<div class="reslist">
  <div>
  <table class="table table-hover  table-striped table-bordered" >
    <thead>
    <tr>
      <th>菜品编号</th>
      <th>菜品名</th>
      <th>菜品介绍</th>
      <th>菜品价格</th>
      <th></th>
    </tr>
    </thead>
    <tbody id="display">

    </tbody>
  </table>
  </div>
<div class="zy">
  <p2>总价格：</p2><p1 id="money" >0</p1>
</div>
<div> <a href="restaurant/createorder"><button class="btn-blue" type="button">生成订单</button> </a>
</div>

  <div class="row">
    <div id="pageList" class="col-12 col-md-8"></div>
    <div id="pageTips" class="col-12 col-md-4"></div>
  </div>

</div>
<script>
  function adddish(did){
    $.ajax({
      type: "GET",
      url: "restaurant/adddish",
      dataType: "json",
      data:{did:did,rid:window.location.search.substring(5)},

      success: function (result){
        let totalvalue=result.dataZone.money;
        $('#money').text(totalvalue);
         }
    })
  }

  $(document).ready(function (){
    gotoPage(1,5);


  })




  function gotoPage(page=1, pageSize=5) {
    var rid=window.location.search;
    // var page = page == null ? 1 : page;
    // var pageSize = pageSize == null ? 3 : pageSize;
    $.ajax({
      type: "GET",
      url: "restaurant/listdishespage"+rid,
      dataType: "json",
      data: "page=" + page + "&pageSize=" + pageSize,
      success: function (result) {
        // 解析返回的json数据并显示到界面中,封装为函数吧,太多东西了
        parseDataAndShow(result);
        //解析渲染分页条
        parsePageAndShow(result);
      },
      error: function () {
        alert("数据出错,请调试程序");
      }
    });
  }

  function parseDataAndShow(result) {
    // $('#display thead').empty();//清空表头
    $('#display').empty();//清空数据
    // 获取数据集合
    let reslist= result.dataZone.pageInfo.list;
    //渲染表头以及数据
    //渲染表头

    $.each(reslist,function (index,item) {
      var did=item.did;
      var rid=window.location.search;
      var Tr = $('<tr class="alert-success" ></tr>');
      var didTd=$('<td></td>').text(item.did);
      var dnameTd = $('<td></td>').text(item.dname);
      var dintroductionTd = $('<td></td>').text(item.dintroduction);
      var dpriceTd=$('<td></td>').text(item.dvalue);
      var button=$('<td></td>').html('<button type="button" onclick="adddish(this.parentNode.parentNode.cells[0].innerHTML)" class="btn-blue">加入订单</button></a>')
      Tr.append(didTd).append(dnameTd).append(dintroductionTd).append(dpriceTd).append(button);


      $("#display").append(Tr);
    });
  }



  function parsePageAndShow(result) {
    //因为是不跨页面的刷新操作,所以操作前先清空当前节点内容
    $("#pageTips").empty();
    $("#pageList").empty();

    var pageInfo = result.dataZone.pageInfo;
    //构建分页信息
    $("#pageTips").html("共" + pageInfo.total + "条记录," + pageInfo.pages + "页,每页" + pageInfo.pageSize + "条");
    //构建分页列表
    var oUl = $("<ul></ul>").addClass("pagination");
    var firstLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("首页").addClass("page-link").attr("href", "#"));
    var preLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("上一页").addClass("page-link").attr("href", "#"));
    if (pageInfo.isFirstPage) {
      firstLi.addClass("disabled");
      preLi.addClass("disabled");
    }
    oUl.append(firstLi).append(preLi);

    $.each(pageInfo.navigatepageNums, function (index, item) {
      var numLi = $("<li></li>").addClass("page-item").append($("<a></a>").text(item).addClass("page-link").attr("href", "#"));
      if (pageInfo.pageNum == item)
        numLi.addClass("active");
      //给页码绑定点击事件,能够跳转页面
      numLi.click(function () {
        console.log(item);
        gotoPage(item);//跳转到指定页面
      });

      numLi.appendTo(oUl);
    });

    var lastLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("尾页").addClass("page-link").attr("href", "#"));
    var nextLi = $("<li></li>").addClass("page-item").append($("<a></a>").text("下一页").addClass("page-link").attr("href", "#"));
    if (pageInfo.isLastPage) {
      nextLi.addClass("disabled");
      lastLi.addClass("disabled");
    }
    //给其他页码标签绑定事件
    firstLi.click(function () {
      gotoPage(1);
    });
    preLi.click(function () {
      gotoPage(pageInfo.pageNum - 1);
    });
    nextLi.click(function () {
      gotoPage(pageInfo.pageNum + 1);
    });
    lastLi.click(function () {
      gotoPage(pageInfo.pages + 1);
    });//因为设置了分页插件的合理化配置,所以给一个很大的值就会到最后一页
    oUl.append(nextLi).append(lastLi);

    $("#pageList").append(oUl);

    //解除不能点击按钮的事件
    //分页代码中的部分属性点击失去链接属性,因为这是dom刷新后添加的事件,所以取消默认行为已经不好用了，需要使用off函数进行解绑定
    $(".pagination .disabled,.pagination .active").off("click");

  }

</script>






</body>
</html>
